import React, { useState,useEffect } from 'react'
import Taro from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import './index.less'

export default (props: any) => {
  const { list } = props
  const [listNew,setListNew] = useState(list)

  useEffect(()=>{
    const arr = [...list]
    arr.map((item:any,i:any)=>{
      item.active = false
    })
    arr[0].active = true
    setListNew(arr)
  },[list])

  // 切换分类
  const tTagChange = (item:any,itm:any) => {
    const arr = [...listNew]
    arr.map((item:any,i:any)=>{
      item.active = false
    })
    arr[itm].active = true
    setListNew(arr)
    props.tTabChange(item,itm)
  }
  return (
    <ScrollView scrollX scrollWithAnimation >
      <View style={{ width: list.length * 65 }} className='tagTab'>
        {
          listNew.map((item: any, i: any) => (
            <View onClick={()=>{tTagChange(item,i)}} className={item.active?'tagLi active':'tagLi'}>{item.title}</View>
          ))
        }
      </View>
    </ScrollView>

  )
}
